<template>
    <el-config-provider :locale="locale">
        <router-view />
    </el-config-provider>
</template>

<script>
import { computed } from 'vue'
import { useUserStore } from '@/store'
import { useRouter, useRoute } from 'vue-router'
import { setToken, getToken } from '@/libs/util'
import { ElConfigProvider, ElMessageBox } from 'element-plus'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
export default {
    name: 'App',
    components: {
        ElConfigProvider,
    },
    setup() {
        const userStore = useUserStore()
        const router = useRouter()
        const route = useRoute()

        const hasGetInfo = computed(() => userStore.hasGetInfo)
        const token = getToken()
        // 处理登录过期的情况
        if (!!token && !hasGetInfo.value) {
            userStore.getUserInfo().then(() => {
                // 
            }).catch(res => {
                console.log('清除登录状态')
                if (res.Code === 403) {
                    ElMessageBox.alert(res.Message || '登录已失效，请重新登录', '提示', {
                        confirmButtonText: process.env.NODE_ENV === 'production' ? '确定' : '去登录',
                        callback: action => {
                            if (action === 'confirm') {
                                if (process.env.NODE_ENV === 'production') {
                                    // 生产环境
                                    // todo
                                    setToken('')
                                } else {
                                    // 开发环境
                                    setToken('')
                                    router.replace({
                                        name: 'login',
                                        query: {
                                            ...route.query,
                                            routeName: route.name
                                        }
                                    })
                                }
                            }
                        }
                    })
                }
            })
        }

        return {
            locale: zhCn
        }
    }
}
</script>

<style lang="less">
.size {
    width: 100%;
    height: 100%;
}
html,
body {
    .size;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
body {
    font-size: 14px;
}
#app {
    .size;
    background-size: 50px !important;
}
</style>